<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Serendipity</title>
<link rel="shortcut icon" href="style/images/favicon.png"/>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/css/view.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/type/marketdeco.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/type/merriweather.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/css/queries.css" media="all" />
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/css/ie8.css" media="all" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="style/css/ie9.css" media="all" />
<![endif]-->
<script type="text/javascript" src="style/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="style/js/html5.js"></script>
<script type="text/javascript" src="style/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="style/js/selectnav.js"></script>
<script type="text/javascript" src="style/js/twitter.min.js"></script>
</head>

<body class="singular page">
<div id="page" class="hfeed">
<div id="wrapper">
<header id="branding" role="banner">
  <h1 id="site-title"> 
  	<a href="index.html" title="Serendipity" rel="home">
    		<img src="style/images/logo.png" alt="Serendipity" />
    </a> 
  </h1>
  <div class="social">
    <div class="widget_search">
      <form method="get" class="search-form">
        <input type="submit" value="Search" class="search-submit-button" />
        <input type="text" value="Search" onfocus="this.value=''" onblur="this.value='Search'" name="s" class="search-text-box" />
      </form> 
    </div>
    <ul>
      <li><a href="#" target="_blank"><img src="style/images/icon-rss.png" alt="RSS" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-facebook.png" alt="Facebook" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-twitter.png" alt="Twitter" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-dribbble.png" alt="Dribbble" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-linkedin.png" alt="LinkedIn" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-pinterest.png" alt="Pinterest" /></a></li>
    </ul>
  </div>
  <nav id="access" class="access" role="navigation">
        <div id="menu" class="menu">
        	<ul id="tiny">
				<li><a href="index.html">Blog</a>
					<ul>
			            <li><a href="post.html">Blog Post</a></li>
			        </ul>
				</li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="misc.html">Styles</a>
					<ul>
			            <li><a href="misc.html">Misc</a></li>
			            <li><a href="columns.html">Columns</a></li>
			            <li><a href="typography.html">Typography</a></li>
			        </ul>
				</li>
				<li><a href="about.html">About</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</div>
		<div class="triangle-l"></div>
		<div class="triangle-r"></div>
  </nav>
  <!-- #access --> 
</header>
<!-- #branding -->

<div id="main">

<div id="primary">
  <div id="content" role="main">
  
  <div id="crumbs">
  	<a href="#">Home</a> <span class="delimiter">/</span> 
  	<span class="current">Misc</span>
  </div>
				

  <!-- begin article -->
  <article class="page hentry">
  	<header class="entry-header">
		<h1 class="entry-title"><a href="#">Misc</a></h1>
    </header>
    <!-- .entry-header -->
    
    <div class="entry-content">
    
    <!-- Begin Column -->
        <div class="one-half">
          <h3>Tabs</h3>
          <ul class="tabs">
            <li><a href="#tab1">This is</a></li>
            <li><a href="#tab2">Tabbed</a></li>
            <li><a href="#tab3">Content</a></li>
          </ul>
          <div class="tab_container">
            <div id="tab1" class="tab_content">
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc rhoncus tortor quis eros bibendum a tempus est dapibus.</p>
            </div>
            <div id="tab2" class="tab_content">
              <p>Etiam molestie, risus eu gravida lobortis, velit sapien aliquam lectus, nec hendrerit lectus erat ac libero. Aenean fermentum luctus viverra. Pellentesque id lectus ante, vel tristique elit. Fusce mattis, purus non consectetur cursus, justo nisi viverra sem, ac lobortis ipsum sapien vel purus. Vivamus aliquet gravida nibh sit amet accumsan. Fusce et lorem nunc. </p>
            </div>
            <div id="tab3" class="tab_content">
              <p>Nulla non tortor eget ligula dapibus semper non ut mauris. Nam feugiat, lorem a tempus auctor, odio nisl porttitor lacus, ut ultrices neque massa a odio. Pellentesque sit amet leo dictum nisl tempor malesuada id ut magna. Etiam non mauris eget massa sagittis euismod. Aliquam lectus nulla, consequat eget molestie id, malesuada sit amet lectus. Pellentesque eget justo sit amet nunc adipiscing semper at ac quam.</p>
            </div>
          </div>
        </div>
        <!-- End Column --> 
        <!-- Begin Column -->
        <div class="one-half last">
          <h3>Toggle</h3>
          <!-- Begin Toggle -->
          <div class="toggle">
            <h4 class="title">Click to title</h4>
            <div class="togglebox">
              <div>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc rhoncus tortor quis eros bibendum a tempus est dapibus. Vivamus consectetur quam eu tellus porttitor ultrices. Nunc metus massa, ullamcorper sit amet malesuada a, porttitor in tellus.</p>
              </div>
            </div>
          </div>
          <!-- End Toggle --> 
          
          <!-- Begin Toggle -->
          <div class="toggle">
            <h4 class="title">Click to title</h4>
            <div class="togglebox">
              <div>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc rhoncus tortor quis eros bibendum a tempus est dapibus. Vivamus consectetur quam eu tellus porttitor ultrices. Nunc metus massa, ullamcorper sit amet malesuada a, porttitor in tellus.</p>
              </div>
            </div>
          </div>
          <!-- End Toggle --> 
          
          <!-- Begin Toggle -->
          <div class="toggle">
            <h4 class="title">Click to title</h4>
            <div class="togglebox">
              <div>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc rhoncus tortor quis eros bibendum a tempus est dapibus. Vivamus consectetur quam eu tellus porttitor ultrices. Nunc metus massa, ullamcorper sit amet malesuada a, porttitor in tellus.</p>
              </div>
            </div>
          </div>
          <!-- End Toggle --> 
          
        </div>
        <!-- End Column -->
        <div class="clear"></div>
        
        <hr />
		
		<div class="one-half">
			<h3>Boxes</h3>
			<div class="info-box">This is an information box</div>
			<div class="download-box">This is a download box</div>
			<div class="warning-box">This is a warning box</div>
			<div class="note-box">This is a note box</div>
		</div>
		<div class="one-half last">
			<h3>Map</h3>
			<div class="map "><iframe width="1040" height="227" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?ll=40.967132,29.07403&amp;spn=0.047894,0.132093&amp;vpsrc=6&amp;t=m&amp;z=14&amp;output=embed"></iframe></div>
		</div>
		<div class="clear"></div>

 	</div>
    <!-- .entry-content -->
    
  </article>
  <!-- end article -->
  

  
  </div><!-- #content -->
</div><!-- #primary -->


</div><!-- #main -->

	<footer id="colophon" role="contentinfo">
		<div id="supplementary" class="four">
			<div id="first" class="widget-area" role="complementary">
				<aside class="widget">
					<h5 class="widget-title">Search</h5>	
					<form method="get" id="searchform" action="http://themes.iki-bir.com/serendipity-wp/">
						<input type="text" class="field" name="s" id="s" title="Search" placeholder="" />
						<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
					</form>
				</aside>
				
				<aside class="widget">
					<h5 class="widget-title">Recent Posts</h5>		
						<ul>
							<li><a href="#" title="A Wonderful Serenity">A Wonderful Serenity</a></li>
							<li><a href="#" title="The Meridian Sun">The Meridian Sun</a></li>
							<li><a href="#" title="Gallery Format">Gallery Format</a></li>
							<li><a href="#" title="Gregor Samsa">Gregor Samsa</a></li>
							<li><a href="#" title="A Life In The Day">A Life In The Day</a></li>
						</ul>
				</aside>
			</div><!-- #first .widget-area -->
	
			<div id="second" class="widget-area" role="complementary">
				<aside class="widget">
					<h5 class="widget-title">Twitter</h5>
					<div id="twitter-wrapper">
						<div id="twitter"></div>
						<span class="username"><a href="http://twitter.com/elemisdesign">→ Follow @elemisdesign</a></span>
					</div>
				</aside>	
			</div><!-- #second .widget-area -->
	
			<div id="third" class="widget-area" role="complementary">
				<aside class="widget">
					<h5 class="widget-title">Tags</h5>
						<div class="tagcloud"><a href='#' class='tag-link-37' title='1 topic' style='font-size: 8pt;'>blogroll</a>
						<a href='#' class='tag-link-33' title='4 topics' style='font-size: 19.666666666667pt;'>daily</a>
						<a href='#' class='tag-link-32' title='1 topic' style='font-size: 8pt;'>dialog</a>
						<a href='#' class='tag-link-28' title='1 topic' style='font-size: 8pt;'>gallery</a>
						<a href='#' class='tag-link-27' title='1 topic' style='font-size: 8pt;'>journal</a>
						<a href='#' class='tag-link-36' title='1 topic' style='font-size: 8pt;'>link</a>
						<a href='#' class='tag-link-31' title='1 topic' style='font-size: 8pt;'>motion</a>
						<a href='#' class='tag-link-38' title='1 topic' style='font-size: 8pt;'>music</a>
						<a href='#' class='tag-link-25' title='5 topics' style='font-size: 22pt;'>photo</a>
						<a href='#' class='tag-link-26' title='2 topics' style='font-size: 13.25pt;'>professional</a>
						<a href='#' class='tag-link-29' title='1 topic' style='font-size: 8pt;'>quotation</a>
						<a href='#' class='tag-link-34' title='1 topic' style='font-size: 8pt;'>show</a>
						<a href='#' class='tag-link-39' title='1 topic' style='font-size: 8pt;'>sound</a>
						<a href='#' class='tag-link-35' title='1 topic' style='font-size: 8pt;'>tv</a>
						<a href='#' class='tag-link-30' title='1 topic' style='font-size: 8pt;'>video</a></div>
				</aside>
				
				<aside class="widget">
					<h5 class="widget-title">Archives</h5>
						<ul>
							<li><a href='#' title='May 2012'>May 2012</a></li>
							<li><a href='#' title='April 2012'>April 2012</a></li>
						</ul>
				</aside>
			</div><!-- #third .widget-area -->
		
			<div id="fourth" class="widget-area" role="complementary">
				<aside class="widget">
					<h5 class="widget-title">About</h5>			
					<div class="textwidget"><p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. </p>
						<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
					</div>
				</aside>
			</div><!-- #third .widget-area -->
		</div><!-- #supplementary -->
		<div id="site-generator">
			Copyright 2012 - Serendipity
		</div>

	</footer><!-- #colophon -->
	</div><!-- #wrapper -->
</div><!-- #page -->

<script type="text/javascript" src="style/js/scripts.js"></script>
</body>
</html>